<template>
	<view>
		<view class="explain">
			您的申诉的问题会在1个工作日内处理，请耐心等候，一经核实立即给予补偿；滥用申诉功能，可能会减少每日申诉次数。
		</view>
		<view>
			<view v-for="(item,index) in arrlist" :key="index" @click="detailsdata(item.id)" class="listbox">
				<view class="flex ac" style="margin-bottom: 10rpx;">
					<image class="listviewimage" :src="item.commodity_picture">
					</image>
					<view style="margin-left: 20rpx;font-size: 30rpx;">{{item.commodity_name}}</view>
				</view>
				<view class="listviewtext" style="margin-bottom: 10rpx;">申述时间：{{item.create_time}}</view>
				<view class="listviewtext">申述理由：{{item.info}}</view>
				<view v-if="item.status==1" class="listborder listborder_bg1">已申诉</view>
				<view v-if="item.status==2" class="listborder listborder_bg2">已驳回</view>
			</view>
			<!-- <view class="empty">仅展示最近半年的记录~</view> -->
		</view>

		<!-- 上拉加载数据 -->
		<view class="loadmore">
			<view v-if="load" class="loading-more">
				<view class="more-bottom-line" style="display: flex;">
					<view class="more-loading"></view>
					<text class="more-lineTxt">正在加载...</text>
				</view>
			</view>
			<view v-if="nomore==false" class="more-finish">
				<view class="more-bottom-line">
					<view class="more-line"></view>
					<text class="more-lineTxt">暂无更多了~</text>
					<view class="more-line"></view>
				</view>
			</view>
		</view>

		<!-- 暂无数据 -->
		<view v-if="nodata==true" class="nodatabox">
			<image style="width:279rpx;" mode="widthFix" src="../../static/icon/aa/gameise.png">
			</image>
			<view class="nodatatext">暂无消息</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/static/common.js";
	export default {
		data() {
			return {
				arrlist: [],
				pageIndex: 1,
				load: true,
				nomore: true,
				nodata: false,
				hasMore: false,
			}
		},

		onLoad(e) {
			this.listAppealdata()
		},

		// 上拉触底事件
		onReachBottom: function() {
			var that = this
			if (that.hasMore) {
				that.listAppealdata() //调用函数
			}
		},

		methods: {
			detailsdata(e){
				var id = e
				uni.navigateTo({
					url: '/pages/appealdetails/appealdetails?id=' + id
				})
			},
			
			async listAppealdata(e) {
				let apply = await request(`${getApp().globalData.http}user/listAppeal`, {
					'X-Requested-With': 'XMLHttpRequest',
					'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
				}, "GET", {
					token: getApp().globalData.token,
					page_num: this.pageIndex,
					page_size: 10,
				})
				this.arrlist = this.arrlist.concat(apply.data.data)
				// 上拉加载数据
				if (apply.data.page_num == apply.data.total_num) {
					this.hasMore = false
				} else {
					this.hasMore = true
				}
				if (apply.data.data.length == 0) {
					this.nomore = true
					this.nodata = true
				}
				if (apply.data.data.length !== 0) {
					this.nomore = true
					this.nodata = false
				}
				if (this.hasMore) {
					this.pageIndex = this.pageIndex + 1
				} else {
					this.load = false
					if (apply.data.data.length == 0) {
						this.nomore = true
					} else {
						this.nomore = false
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
		padding: 0 20rpx;
	}

	.explain {
		font-size: 23rpx;
		color: #353535;
		margin-bottom: 25rpx;
	}

	.listbox {
		padding: 35rpx 20rpx;
		background-color: #ffffff;
		box-shadow: 0 0.08rem 0.16rem 0 rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		position: relative;
		margin-bottom: 20rpx;
	}

	.listviewimage {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}

	.listviewtext {
		font-size: 26rpx;
		color: #777777;
	}

	.listborder {
		width: 110rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 0 30rpx 0 30rpx;
		font-size: 26rpx;
		color: #ffffff;
	}

	.listborder_bg1 {
		background-image: -webkit-linear-gradient(left, #3ee02b 0%, #13d02b 90%);
	}

	.listborder_bg2 {
		background-image: linear-gradient(90deg, #787c80 0%, #434649 90%);
	}

	.empty {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		color: #969799;
	}

	// 暂无数据
	.nodatabox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 188rpx;
	}

	.nodatatext {
		font-size: 28rpx;
		color: #909090;
		margin: 20rpx 0;
	}
</style>